<template>
	<view class="one">
		<!-- <view class="bg-white padding">
			<view class="cu-steps">
				<view class="cu-item" :class="index>num?'':'text-blue'" v-for="(item,index) in numList" :key="index">
					<text class="num"  :data-index="index + 1"></text> {{item.name}}
				</view>
			</view>
		</view>
		<view class="BH5"></view> -->
		<view class="padding-sm pd10">
			<view class="position">
				<view class="title"><span>*</span>商家名称</view>
				<view class="padding-top-xs"><input placeholder="请输入商家名称" v-model="shangjia_name"></input></view>
			</view>
			<view class="position">
				<view class="title"><span>*</span>商家负责人姓名</view>
				<view class="padding-top-xs"><input placeholder="请输入负责人姓名" v-model="user_name"></input></view>
			</view>
			<view class="position">
				<view class="title"><span>*</span>商家联系电话</view>
				<view class="padding-top-xs"><input placeholder="请输入负责人联系电话" v-model="tel"></input></view>
			</view>
			<view class="position">
				<view class="title"><span>*</span>商家地址</view>
				<view class="padding-top-xs"><input placeholder="请输入商家地址" v-model="address"></input></view>
			</view>
			<view class="position jianjie">
				<view class="title"><span>*</span>商家简介</view>
				<view class="padding-top-xs"><textarea placeholder="请输入商家简介" v-model="content" maxlength="-1"></textarea></view>
			</view>
		</view>
		<view class="BH5"></view>
		<view class="bian flex spaceb">
			<view class="title"><span>*</span>商家logo</view>
			<view class="yyzz" @click="addImg('logo')">
				<u-icon name="photo" color="grey" size="60" v-if="logo==''"></u-icon>
				<img :src="logo" v-if="logo!=''"></img>
			</view>
		</view>
		<view class="bian flex spaceb">
			<view class="title"><span>*</span>商家营业执照</view>
			<view class="yyzz" @click="addImg('zhizhao')">
				<u-icon name="photo" color="grey" size="60" v-if="zhizhao==''"></u-icon>
				<img :src="zhizhao" v-if="zhizhao!=''"></img>
			</view>
		</view>
		<view class="bian">
			<view class="title"><span>*</span>商家幻灯片</view>
			<view class="" style="display: flex;flex-wrap: wrap;">
				<view class="mt10 flex mr10" v-for="(item,index) in imgpath" v-if="imgpath!=''"
					style="position: relative;">
					<image :src="item" mode="" style="width: 160rpx;height: 160rpx;"></image>
					<image src="@/static/img/shop/img_del.png" mode="" @click.stop="deleteimg(index)"
						style="width: 36rpx;height: 36rpx;position: absolute;top:6rpx;right: 6rpx;"></image>
				</view>
				<view v-if="lbtcount<3"  class="upload-box" @click="addImg('imgpath')"></view>
			</view>
			<!-- <view class="yyzz" @click="shangchuan('zhizhao')">
				<u-icon name="photo" color="grey" size="60"></u-icon>
				<img :src="zhizhao" v-if="zhizhao!=''"></img>
			</view> -->
		</view>
		<view class="H50"></view>
		<view class="btn flex flex-direction">
			<!-- <button class="cu-btn lg bg-blue" @click="next">下一步</button> -->
			<button class="cl-w" style="background: #EB702D;" @click="next">提交审核</button>
		</view>
	</view>
</template>

<script>
	const api = require('@/config/api');
	const util = require('@/utils/util');
	export default {
		data() {
			return {
				id: 0,
				lbtcount: 0,
				numList: [{
					name: '提交资质'
				}, {
					name: '选择入驻方式'
				}, {
					name: '等待审核'
				}, ],
				num: 0,
				shangjia_type: [],
				shangjia_name: '',
				sfz_z: '',
				sfz_f: '',
				zhizhao: '',
				type_id: '', //分类id
				keywords: '',
				sort: '',
				title: '',
				tel: '',
				logo: '',
				content: '',
				imgpath: [],
				user_name: '',
				address: ''
			};
		},
		methods: {
			extj1(e) {
				console.log(e)
				this.index = e.target.value
				this.title = this.shangjia_type[this.index].title
			},
			next() {
				if (!this.shangjia_name) {
					uni.showToast({
						title: '请填写商家名称',
						icon: "none"
					})
					return false
				}
				if (!this.user_name) {
					uni.showToast({
						title: '请填写商家负责人姓名',
						icon: "none"
					})
					return false
				}
				if (!this.tel) {
					uni.showToast({
						title: '请填写联系电话',
						icon: "none"
					})
					return false
				}
				if (!this.address) {
					uni.showToast({
						title: '请填写商家地址',
						icon: "none"
					})
					return false
				}
				if (!this.content) {
					uni.showToast({
						title: '请填写商家简介',
						icon: "none"
					})
					return false
				}
				if (!this.logo) {
					uni.showToast({
						title: '请上传商家LOGO',
						icon: "none"
					})
					return false
				}
				if (!this.zhizhao) {
					uni.showToast({
						title: '请上传商家营业执照',
						icon: "none"
					})
					return false
				}
				if (!this.imgpath) {
					uni.showToast({
						title: '请上传商家幻灯片',
						icon: "none"
					})
					return false
				}
				util.request(api.appCenterApi+'/shop/save_business', {
					do: 'shangjia',
					op: 'ruzhu',
					id: this.id,
					shangjia_name: this.shangjia_name,
					user_name: this.user_name,
					logo: this.logo,
					zhizhao: this.zhizhao,
					tel: this.tel,
					content: this.content,
					imgpath: this.imgpath,
					address: this.address
				}, 'POST').then(function(res) {

					// this.info = res
					uni.showToast({
						title: '保存成功',
					});
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/shangjia/certification/three/three'
						})
					}, 1000);
				});

			},
			addImg(e) {
				let count = 1;
				if(e=='imgpath') count = 3;
				let that = this;
				uni.chooseImage({
					count: count,
					success: (res) => {
						uni.showLoading({
							title: '上传中...',
							mask: true
						});
						uni.cropImage({
							src: res.tempFilePaths[0],
							cropScale: '1:1',
							success(tempFilePath) {
								let imgUrl = tempFilePath.tempFilePath;
								util.lnkUploadFile(imgUrl).then(function(fileImg) {
									if(e=='imgpath')
									{
										that[e].push(fileImg.data.url);
										that.lbtcount = that[e].length;
										
									}else{
										that[e] = fileImg.data.url;
									}
									
									uni.hideLoading();
								});
							},
							complete() {
								uni.hideLoading();
							}
						})
					},
					fail: (err) => {
						console.log('chooseImage fail', err)
					}
				})
			},
			deleteimg(index) {
				var that = this;
				uni.showModal({
					content: '确认删除该图片吗？',
					success: function(res) {
						if (res.confirm) {
							that.imgpath.splice(index, 1);
							that.lbtcount = that.imgpath.length;
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},

		},
		onLoad() {

		}
	}
</script>

<style lang="scss">
	page {
		background-color: #fff;
	}

	.one {
		margin: 0 20rpx;
		.BH5 {
			background-color: #F3F5F4;
			height: 4px;
		}

		.title {
			padding: 5px 0 15px;
			font-weight: 600;

			span {
				color: #E74949;
				padding-right: 5px;
			}
		}

		.position {
			display: flex;
			justify-content: space-between;
			padding: 5px 0 0;

			input {
				text-align: right;
			}
		}
		.jianjie{
			display: inherit;
		}

		.bian {
			border-bottom: 1px solid #F7F7F7;
			padding: 10px 10px 20px;
		}

		.shangc {
			display: flex;
			justify-content: space-between;

			.sc-l {
				width: 48%;
				text-align: center;
				color: #A1A1A1;

				.sc-l-img {
					background-color: #F7F7F7;
					padding: 10px 0;

					img {
						width: 140px;
						height: 85px;
					}
				}
			}
		}

		.yyzz {
			background-color: #F7F7F7;
			text-align: center;
			width: 160rpx;
			height: 160rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 10rpx;
			overflow: hidden;

			img {
				width: 160rpx;
				height: 160rpx;
			}
		}

		.H50 {
			height: 50px;
		}

		.btn {
			position: fixed;
			bottom: 0;
			left: 0;
			padding: 30rpx;
			width: 100%;
			background-color: #fff;
			z-index: 9;
		}
	}

	.text-blue,
	.line-blue,
	.lines-blue {
		color: #0081ff;
	}

	button {
		width: 92%;
		background-color: #FD7A4D;
		color: white;
		position: fixed;
		bottom: 0;
		margin-bottom: 20rpx;
	}

	.upload-box {
		margin-left: 20rpx;
		width: 160rpx;
		height: 160rpx;
		border: 1px solid #d9d9d9;
		position: relative;
	}

	.upload-box::before {
		width: 2px;
		height: 39.5px;
	}

	.upload-box::after {
		width: 39.5px;
		height: 2px;
	}

	.upload-box::before,
	.upload-box::after {
		content: " ";
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		background-color: #d9d9d9;
	}
</style>
